<template>
  <div>
    <r-search :searchForm="searchForm" :searchHandle="searchHandle" :searchData="searchData" />
    <r-table :tableHandles="tableHandles" :isSelection="false" :isIndex="false" :isPagination="true"
      :tableData="tableData" :tableCols="tableCols" :tablePage="tablePage" :isHandle="true"
      @refresh="init()">

    </r-table>
    <r-form :formRules="formRules" :formHandle="formHandle" :formData="formData"
      :formCols="formCols" ref="elForm" labelWidth="200px" dialogWidth="700px" :isHandle="true" />
  </div>
</template>
<script>
export default {
  data() {
    return {
      searchData: {
        name: '',
        commonType: '2',
      },
      searchForm: [
        {
          type: 'input',
          prop: 'name',
          placeholder: '类型名称',
          width: 150
        },
        {
          type: 'select',
          prop: 'commonType',
          placeholder: '请选择',
          width: 150,
          options: [
            { label: '公有', value: '1' },
            { label: '私有', value: '2' }
          ]
        }
      ],
      searchHandle: [
        {
          label: '搜索',
          type: 'success',
          icon: 'el-icon-search',
          handle: e => this.init()
        }
      ],

      tableHandles: [
        // {
        //   label: "公有类型",
        //   type: "primary",
        //   handle: e => this.elFormVisible()
        // },
        // {
        //   label: "自建类型",
        //   type: "primary",
        //   handle: e => this.elFormVisible()
        // },
        {
          label: "添加",
          type: "primary",
          handle: e => this.elFormVisible()
        },
        // {
        //   label: "导出数据",
        //   type: "primary",
        //   handle: e => {
        //
        //   }
        // }
      ],
      tableData: [],
      tableCols: [
        {
          label: '序号',
          prop: 'id',
        },
        {
          label: '类型名称',
          prop: 'typeName',
        },
        {
          label: '厂家',
          prop: 'btFactory',
        },
        {
          label: '电池电压',
          prop: 'voltage'
        },
        {
          label: '电池容量',
          prop: 'ah'
        },
        {
          label: '电芯类型',
          prop: 'cellType'
        },
        {
          label: 'BMS厂商',
          prop: 'bmsFactory'
        },
        {
          label: 'GPS厂商',
          prop: 'gpsFactory'
        },
        {
          label: '电池串节数',
          prop: 'cellNum'
        },
        {
          label: '更新时间',
          prop: 'ctime'
        },
        {
          label: '启用状态',
          prop: 'giftMoney'
        },
        {
          label: '操作',
          type: "button",
          width: 300,
          btnList: [
            {
              label: '编辑',
              type: 'text',
              handle: (row) => this.elFormDetail(row)
            },
            {
              label: '删除',
              type: 'text',
              handle: (row) => {
                this.$confirm('确定要删除吗?', '提示', {
                  confirmButtonText: '确定',
                  cancelButtonText: '取消',
                  type: 'warning'
                }).then(async () => {
                  const res = await this.apis.batteryType_del({
                    id: row.id
                  });
                  this.$message({
                    type: 'success',
                    message: '删除成功!'
                  });
                  this.init();
                }).catch(() => {

                });
              }
            },

          ]
        }
      ],
      tablePage: { limit: 10, page: 1, total: 0 },
      formData: {
        typeName: "",
        voltage: "",
        cellType: "",
        cellNum: "",
        ah: "",
        btFactory: "",
        bmsFactory: "",
        gpsFactory: "",
      },
      formCols: [
        { type: "input", label: "类型名称", width: 350, prop: "typeName" },
        {
          type: "select", label: "电压", width: 350, prop: "voltage", options: [
            { label: '48V', value: '48' },
            { label: '60V', value: '60' },
            { label: '72V', value: '72' }
          ], remark: ''
        },
        { type: "input", label: "电芯类型", width: 350, prop: "cellType", },
        { type: "input", label: "电池串", width: 350, prop: "cellNum", },
        { type: "input", label: "电池容量(总）", width: 350, prop: "ah", },
        { type: "input", label: "电池厂家", width: 350, prop: "btFactory", },
        { type: "input", label: "BMS厂商", width: 350, prop: "bmsFactory", },
        { type: "input", label: "GPS厂商", width: 350, prop: "gpsFactory", },
        // { type: "switch", label: "上线/下线", width: 350, prop: "status" },
      ],
      formRules: {
        typeName: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        voltage: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        cellType: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        cellNum: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        ah: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        btFactory: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        bmsFactory: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
        gpsFactory: [
          { required: true, message: '请输入', trigger: 'blur' },
        ],
      },
      formHandle: [
        {
          label: "取消",
          handle: e => this.elFormVisible(),
        },
        {
          label: "确定",
          type: "success",
          handle: e => this.elFormSubmit(),
        },

      ],


    };
  },
  components: {},
  computed: {},
  mounted() {
    this.init()
  },
  methods: {
    async init() {
      let parm = {
        ...this.searchData, ...{
          pageNum: this.tablePage.page,
          pageSize: this.tablePage.limit
        }
      }
      let res = await this.apis.batteryTypeList(parm)
      if (res) {
        this.tableData = res.rows
        this.tablePage.total = res.total
      }
    },
    async elFormSubmit() {
      this.$refs.elForm.$refs.ruleForm.validate(async (valid) => {
        if (valid) {
          if (this.formData.id) {
            let res = await this.apis.batteryType_updata(this.formData)
            if (res) {
              this.init()
              this.elFormVisible()
            }
          } else {
            let res = await this.apis.batteryType_save(this.formData)
            if (res) {
              this.init()
              this.elFormVisible()
            }
          }
        }
      });
    },
    async changestate(id) {
      let res = await this.api.packchange({ id })
      if (res) {
        this.init()
      }
    },
    elFormDetail(row) {
      Object.keys(this.formData).forEach(key => {
        this.formData[key] = row[key]
      })
      this.formData.id = row.id;
      this.elFormVisible()
    },
  }
};
</script>
<style scoped lang='scss'>
.el-icon-search {
  margin-right: 10px;
}
.Tip {
  margin-left: 20px;
}
</style>
